import Vue from "vue";
import Vuex from "vuex";
//1.应用Vuex
Vue.use(Vuex);

//2.实例化Vuex仓库
const store = new Vuex.Store({
  //数据,state的值必须是一个对象!!!! 对象中保存我们想要的数据
  state: {
    num: 4,
  },
  getters: {
    doubleNum(state) {
      //vuex中计算属性的参数就是当前store的state数据
      return state.num * 2;
    },
  },
  // mutations:修改state数据的唯一来源
  //mutations的第一个参数是当前store的state对象，修改state的时候要遵守响应式数据改动规则(vuex响应式原理其实是在vuex内部也new Vue,数据放在vm上)
  mutations: {
    //每次加1
    increment(state) {
      state.num++;
    },
    // 每次加n
    incrementN(state, { n }) {
      state.num += n;
    },
    // //每次异步加n,也可以修改,但是devTools无法跟踪状态
    // incrementN(state,{n}){
    //     setTimeout(()=>{
    //         state.num+=n
    //     })
    // }
  },
  actions: {
    incrementWait({ commit }) {
      setTimeout(() => {
        commit("increment");
      }, 1000);
    },
    incrementNWait({ commit }, payload) {
      setTimeout(() => {
        commit("incrementN", payload);
      }, 1000);
    },
  },
});

//3.暴露store给入口文件
export default store;
